<template>
  <div class="carModelBaseInfo">
    <h4 class="withVerticleLineT4 title14">{{ $t('basicInformation') }}</h4>
    <div class="baseInfoItems">
      <full-parent-dom-with-dask :loading="loadingData"></full-parent-dom-with-dask>
      <a-row class="baseInfoItem">
        <a-col :md="8" :sm="14">{{ $t('policyName') }}</a-col>
        <a-col
          :md="16"
          :sm="10"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.name"></table-ellipsis
        ></a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="8" :sm="14">{{ $t('timeOfCreation') }}</a-col>
        <a-col :md="16" :sm="10" class="result">{{ getDateTime(detailBaseInfoData.createTime) }}</a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="8" :sm="14">{{ $t('creator') }}</a-col>
        <a-col :md="16" :sm="10" class="result">{{ detailBaseInfoData.createBy }}</a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import moment from 'moment'
export default {
  components: {
    FullParentDomWithDask,
    TableEllipsis
  },
  props: {
    detailBaseInfoData: {
      type: Object,
      default () {
        return {}
      }
    },
    loadingData: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({})
  },
  created () {},
  data () {
    return {
      updateStrategyTypeObj: {},
      editupdateStrategyVisible: false
    }
  },
  methods: {
    getDateTime (date) {
      if (!date) {
        return '-'
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang="less" scoped>
.carModelBaseInfo {
  margin-bottom: 20px;
  padding-bottom: 15px;
  .baseInfoItems {
    position: relative;
  }
  .baseInfoItem {
    margin-top: 15px;
    .result {
      text-align: right;
    }
  }
}
</style>
<style lang="less">
.editupdateStrategyDialog {
  .ant-modal-footer {
    margin-top: 15px;
  }
}
</style>
